<template>
  <transition name="dialog-fade">
    <div v-if="showRule" class="container">
      <div class="rule-data">
        <button class="close-btn" @click="toShowSignRule"></button>
        <div class="rule-bg-t">
        </div>
        <div class="rule-content">
          <span class="rule-text">{{signRule}}</span>
        </div>
        <div class="rule-bg-b"></div>
      </div>
      <div class="rule-bg-img">
        <div class="rule-data-bg1"></div>
        <div class="rule-data-bg2"></div>
        <div class="rule-data-bg3"></div>
        <div class="rule-data-bg4"></div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'signRule',
  props: ['showRule'],
  data () {
    return {}
  },
  components: {},
  computed: {
    ...mapGetters(['signRule'])
  },
  methods: {
    toShowSignRule () {
      this.$emit('showSignRule')
    }
  },
  created () {},
  mounted () {}
}
</script>
<style lang="scss" scoped>
.container {
  position: absolute;
  z-index: 3;
  .rule-data {
    width: 653px;
    z-index: 4;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    top: 130px;

    .close-btn {
      position: absolute;
      right: -10px;
      top: -62px;
      width: 69px;
      height: 69px;
      background: url(../assets/images/close-btn.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .rule-content {
    background: url(../assets/images/rule-bg-m.jpg) repeat-y;
    background-size: 100% 100%;
    max-height: 888px;
    width: 653px;
    padding: 0px 60px;
    overflow-y: auto;
    word-wrap: break-word;

    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-webkit-scrollbar {
      display: none;
    }
    &::-webkit-scrollbar {
      background-color: transparent;
    }
  }

  .rule-bg-t {
    width: 653px;
    height: 81px;
    background: url(../assets/images/rule-bg-b.png) no-repeat;
    background-size: 100% 100%;
    transform: rotate(180deg);
    position: relative;
    left: 1px;
    top: 1px;
  }

  .rule-bg-b {
    width: 653px;
    height: 81px;
    background: url(../assets/images/rule-bg-b.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: -1px;
  }

  .rule-bg-img {
    @keyframes rule-data-bg1-animate {
      0% {
        transform: translateX(300%);
      }
      100% {
        transform: translateX(-100%);
      }
    }

    @keyframes rule-data-bg2-animate {
      0% {
        left: 48%;
        opacity: 0.8;
      }
      50% {
        left: 20%;
        opacity: 0.3;
      }
      100% {
        opacity: 1;
        left: -14%;
      }
    }

    @keyframes rule-data-bg3-animate {
      0% {
        left: 11px;
      }
      10% {
        left: -14%;
        opacity: 0;
      }
      10.01% {
        left: 100%;
        opacity: 1;
      }
      100% {
        left: 11px;
      }
    }

    .rule-data-bg1 {
      position: absolute;
      // left: 387px;
      top: 45px;
      width: 188px;
      height: 76px;
      background: url(../assets/images/bg1.png) no-repeat;
      background-size: 100% 100%;
      animation: rule-data-bg1-animate 30s linear infinite;
    }

    .rule-data-bg2 {
      position: absolute;
      // left: 337px;
      top: 84px;
      width: 205px;
      height: 126px;
      background: url(../assets/images/bg2.png) no-repeat;
      background-size: 100% 100%;
      animation: rule-data-bg2-animate 24s linear infinite;
    }

    .rule-data-bg3 {
      position: absolute;
      // left: 11px;
      top: 416px;
      width: 120px;
      height: 49px;
      background: url(../assets/images/bg3.png) no-repeat;
      background-size: 100% 100%;
      animation: rule-data-bg3-animate 30s linear infinite;
    }
    .rule-data-bg4 {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 750px;
      height: 420px;
      background: url(../assets/images/bg4.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
